<template>
    <div class="evaluation-comment">
        <div class="evaluation-comment-top">
            <h3>别人对他的评价（3条）</h3>
            <div class="evaluation-comment-tab"><span class="active">第二轮</span> | <span>第一轮</span></div>
            <img src="@/assets/images/seal-resolve.png" class="seal" />
        </div>
        <div class="evaluation-comment-list">
            <div class="evaluation-comment-item">
                <div class="evaluation-commenter">
                    <div class="user-avatar">
                        <img src="@/assets/1.jpg" />
                    </div>
                    <div class="user-info">
                        <h3>潘辰辰<span>产品设计部</span></h3>
                        <p>05-24发布</p>
                    </div>
                </div>
                <div class="user-rate">
                    <div class="user-rate-1">
                        <div>
                            <p>企业文化</p>
                            <van-rate v-model="rate1" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                        <div>
                            <p>沟通能力</p>
                            <van-rate v-model="rate2" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                        <div>
                            <p>业务能力</p>
                            <van-rate v-model="rate3" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                    </div>
                    <div class="user-rate-2">
                        <slider-rate v-model="rate4" readonly bar-height="16px" bar-radius="8px"></slider-rate>
                    </div>
                    <div class="user-rate-3">
                        <div class="merits-text">
                            <p class="title">优点自述：</p>
                            <p class="content">善于沟通，协调同事关系，积极参与部门项目规划，进行产品设计。</p>
                        </div>
                        <div class="demerits-text">
                            <p class="title">缺点自述：</p>
                            <p class="content">朋友圈分享太少，与新新的交流还要进一步</p>
                        </div>
                    </div>
                    <table class="box-table" cellspacing="1">
                        <tr>
                            <th>评价意见</th>
                            <th>本职薪资建议</th>
                            <th>固定招聘奖金</th>
                            <th>额外奖金建议</th>
                        </tr>
                        <tr>
                            <td>认可</td>
                            <td>20000</td>
                            <td>1000</td>
                            <td>8000</td>
                        </tr>
                        <tr>
                            <th colspan="2">薪资合计</th>
                            <td colspan="2" class="strong">29000(元)</td>
                        </tr>
                    </table>
                </div>
                <van-divider />
            </div>
            <div class="evaluation-comment-item">
                <div class="evaluation-commenter">
                    <div class="user-avatar">
                        <img src="@/assets/1.jpg" />
                    </div>
                    <div class="user-info">
                        <h3>潘辰辰<span>产品设计部</span></h3>
                        <p>05-24发布</p>
                    </div>
                </div>
                <div class="user-rate">
                    <div class="user-rate-1">
                        <div>
                            <p>企业文化</p>
                            <van-rate v-model="rate1" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                        <div>
                            <p>沟通能力</p>
                            <van-rate v-model="rate2" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                        <div>
                            <p>业务能力</p>
                            <van-rate v-model="rate3" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                    </div>
                    <div class="user-rate-2">
                        <slider-rate v-model="rate4" readonly bar-height="16px" bar-radius="8px"></slider-rate>
                    </div>
                    <div class="user-rate-3">
                        <div class="merits-text">
                            <p class="title">优点自述：</p>
                            <p class="content">善于沟通，协调同事关系，积极参与部门项目规划，进行产品设计。</p>
                        </div>
                        <div class="demerits-text">
                            <p class="title">缺点自述：</p>
                            <p class="content">朋友圈分享太少，与新新的交流还要进一步</p>
                        </div>
                    </div>
                    <table class="box-table" cellspacing="1">
                        <tr>
                            <th>评价意见</th>
                            <th>本职薪资建议</th>
                            <th>固定招聘奖金</th>
                            <th>额外奖金建议</th>
                        </tr>
                        <tr>
                            <td>认可</td>
                            <td>20000</td>
                            <td>1000</td>
                            <td>8000</td>
                        </tr>
                        <tr>
                            <th colspan="2">薪资合计</th>
                            <td colspan="2" class="strong">29000(元)</td>
                        </tr>
                    </table>
                </div>
                <van-divider />
            </div>
        </div>
    </div>
</template>

<script>
import { Rate,Divider } from "vant";
import SliderRate from "@/components/sliderRate";
export default {
    name: "evaluation-comment",
    components: {
        [Rate.name]: Rate,
        [Divider.name]: Divider,
        SliderRate,
    },
    data() {
        return {
            rate1: 4,
            rate2: 5,
            rate3: 4,
            rate4: 55,
        };
    },
    computed() {},
    mounted() {},
    methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.evaluation-comment-top {
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    text-align: left;
    h3 {
        font-size: 30px;
        color: #333;
    }
    .evaluation-comment-tab {
        margin-top: 30px;
        display: flex;
        align-items: center;
        font-size: 28px;
        color: #e8e8e8;
        span {
            margin: 0 20px;
            color: #666;
            &.active {
                color: #288ef4;
            }
        }
    }
    .seal {
        width: 138px;
        position: absolute;
        right: 20px;
        top: 20px;
    }
}
.evaluation-comment-list {
    background: #fff;
    padding:30px 20px 0 20px;
}
.evaluation-commenter {
    padding: 30px 20px;
    background: #f5f8fd;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    .user-avatar {
        width: 80px;
        margin-right: 20px;
        img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
        }
    }
    .user-info {
        text-align: left;
        h3 {
            font-size: 32px;
            line-height: 1.2;
            span {
                color: #999;
                font-size: 24px;
                margin-left: 20px;
                font-weight: normal;
            }
        }
        p {
            color: #999;
            font-size: 24px;
            margin-top: 10px;
        }
    }
}
.user-rate {
    padding: 20px;
    background: #fff;
    box-shadow: 0 6px 8px rgba(0,0,0,0.1);
    .box-table{
        margin-top: 30px;
    }
    &-1 {
        display: flex;
        > div {
            flex: 1;
            p {
                font-size: 26px;
                color: #4571a5;
                text-align: center;
                margin-bottom: 15px;
            }
        }
    }
    &-2 {
        padding: 0 20px;
        margin-top: 20px;
    }
    &-3 {
        display: flex;
        margin-top: 20px;
        > div {
            flex: 1;
            text-align: left;
            .title {
                font-size: 24px;
                color: #333333;
                margin-bottom: 15px;
            }
            .content {
                font-size: 24px;
                color: #424b61;
            }
        }
        .merits-text {
            margin-right: 10px;
            background: rgba(235, 56, 56, 0.08);
            padding: 10px;
        }
        .demerits-text {
            background: rgba(204, 204, 204, 0.24);
            padding: 10px;
        }
    }
}
</style>
